<template>
  <div id="app">
    <nav class="navbar navbar-expand-lg navbar-light">
      <div class="collapse navbar-collapse" style="height: 100%">
        <img src="./assets/image/logo1.png" alt="" style="width: 80px; height: 80px" />
        <span style="font-size: 22px; color: #266da8;">河北省网联可信数据空间综合服务平台</span>
        <!-- <img src="./assets/image/logo-text.png" alt="" style=" width: 320px; height: 120px;" /> -->
        <ul class="navbar-nav" style="height: 100%">
          <li class="nav-item">
            <router-link class="nav-link" to="/">首页</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/xuqiu">需求大厅</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/brand">服务机构</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/XinXiPiLu">信息披露</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/ZhengCe">政策法规</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/news">新闻动态</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/connection">联系我们</router-link>
          </li>
        </ul>
        <div class="right">
          <span v-if="list1 == null ? showFirstSpan : !showFirstSpan">
            <el-button size="small" round><router-link to="/login">注册/登录</router-link></el-button>
          </span>
          <el-dropdown v-else>
            <span class="el-dropdown-link">
              {{ list1.bodyName
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <router-link to="/PersonalCenter"
                style="text-decoration: none"><el-dropdown-item>个人中心</el-dropdown-item></router-link>
              <a @click="Tuichu"><el-dropdown-item>退出登录</el-dropdown-item></a>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </nav>

      <router-view style="padding-top: 80px" />

  </div>
</template>
<script>
// import { mapState } from 'vuex';
import { Dengchu } from "./api/api";

export default {
  data() {
    return {
      showFirstSpan: true,
      list1: {},
    };
  },
  methods: {
    DengLu() {
      // this.showFirstSpan=false
      this.$router.push("/login");
    },
    getUser() {
      let list = localStorage.getItem("list");
      if (list) {
        this.list1 = JSON.parse(list);
        // console.log('app', this.list1)
      } else {
        this.list1 = null;
      }
    },
    //退出登录
    Tuichu() {
      Dengchu()
        .then((res) => {
          localStorage.removeItem("list");
          // location.reload()
          this.$message({
            message: "退出成功",
            type: "success",
            duration: 1000,
            onClose: () => {
              this.$router.push({ name: "/" });
              location.reload();
            },
          });
        })
        .catch((error) => { });
    },
  },
  created() {
    this.getUser();
  },
  // computed: {
  //   ...mapState(['list'])
  // },
};
</script>
<style lang="less" scoped>
.navbar {
  padding: 0px !important;
  height: 80px;
  background-color: #f0f8ff;
  position: fixed;
  z-index: 1000;
  width: 100%;
}

.collapse navbar-collapse {
  height: 100%;
}

.navbar-expand-lg .navbar-collapse {
  display: flex;
  justify-content: center;
}

.navbar-nav {
  display: flex;
  align-items: center;
  justify-content: center !important;
}

.nav-item {
  line-height: 65px;
  margin: 0px 5px 0px 5px;
  width: 100px;
  height: 100%;
  text-align: center;
}

.nav-link {
  color: black !important;
}

.nav-link:hover {
  color: #0a51e0 !important;
}

nav li {
  height: 100%;
}

nav li:hover,
nav li.active {
  border-bottom: 4px solid #0a51e0;
}

.right {
  span {
    a {
      text-decoration: none;
      color: black;
    }

    margin-left: 20px;
    font-size: 12px;
  }
}
</style>
